<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数据仪表盘</title>
	<!-- 引入 Tailwind CSS -->
	<script src="https://cdn.tailwindcss.com"></script>
	<!-- 引入 Font Awesome 图标 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						primary: '#e53935', // 红色主题，匹配设计图风格
						secondary: '#f5f5f5',
					},
					fontFamily: {
						sans: ['Inter', 'system-ui', 'sans-serif'],
					},
				},
			}
		}
	</script>
	<style type="text/tailwindcss">
		@layer utilities {
			.card-shadow {
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
			}
			.rank-number {
				@apply w-6 h-6 flex items-center justify-center rounded-full text-white font-bold;
			}
			.rank-number-red {
				@apply bg-red-600;
			}
			.rank-number-gray {
				@apply bg-gray-300 text-gray-700;
			}
		}
	</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-md">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
		<h1 class="text-xl font-bold">数据仪表盘</h1>




		<button onclick="workSetting()" class="bg-secondary text-red-900 py-3 rounded font-medium text-sm">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;参赛设置管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		</button>



		<div class="flex items-center">
			<span class="mr-2">管理员</span>
			<span class="text-sm text-gray-600">admin</span>
			<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center ml-2">
				<i class="fas fa-user"></i>
			</div>
		</div>
	</div>
</header>

<main class="container mx-auto px-4 py-6">
	<!-- 数据统计卡片 -->
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
		<div class="bg-white rounded-lg p-6 card-shadow">
			<p class="text-gray-600 text-sm mb-1">总参赛选手</p>
			<p class="text-3xl font-bold text-primary">258</p>
		</div>
		<div class="bg-white rounded-lg p-6 card-shadow">
			<p class="text-gray-600 text-sm mb-1">总用户数</p>
			<p class="text-3xl font-bold text-primary">3,847</p>
		</div>
		<div class="bg-white rounded-lg p-6 card-shadow">
			<p class="text-gray-600 text-sm mb-1">总点赞量</p>
			<p class="text-3xl font-bold text-primary">221,228</p>
		</div>
		<div class="bg-white rounded-lg p-6 card-shadow">
			<p class="text-gray-600 text-sm mb-1">总浏览量</p>
			<p class="text-3xl font-bold text-primary">2,315,624</p>
		</div>
	</div>

	<!-- 排行榜区域 -->
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
		<!-- 综合得分TOP10 -->
		<div class="bg-white rounded-lg card-shadow p-5">
			<div class="flex items-center mb-4">
				<i class="fas fa-trophy text-primary mr-2"></i>
				<h2 class="font-bold text-lg">综合得分TOP10</h2>
			</div>
			<ul>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-red mr-3">1</span>
					<span>《红色记忆》</span>
					<span class="ml-auto text-primary font-bold">96.5</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-red mr-3">2</span>
					<span>《党的光辉历程》</span>
					<span class="ml-auto text-primary font-bold">94.2</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-red mr-3">3</span>
					<span>《革命精神永流传》</span>
					<span class="ml-auto text-primary font-bold">92.8</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-gray mr-3">4</span>
					<span>《红色家书》</span>
					<span class="ml-auto text-primary font-bold">91.5</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-gray mr-3">5</span>
					<span>《百年征程》</span>
					<span class="ml-auto text-primary font-bold">90.3</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-gray mr-3">6</span>
					<span>《新时代的奋斗者》</span>
					<span class="ml-auto text-primary font-bold">89.7</span>
				</li>
				<li class="flex items-center py-3">
					<span class="rank-number rank-number-gray mr-3">7</span>
					<span>《初心与使命》</span>
					<span class="ml-auto text-primary font-bold">88.9</span>
				</li>
			</ul>
		</div>

		<!-- 学生评分TOP10 -->
		<div class="bg-white rounded-lg card-shadow p-5">
			<div class="flex items-center mb-4">
				<i class="fas fa-graduation-cap text-primary mr-2"></i>
				<h2 class="font-bold text-lg">学生评分TOP10</h2>
			</div>
			<ul>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-red mr-3">1</span>
					<span>《红色记忆》</span>
					<span class="ml-auto text-primary font-bold">95.8</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-red mr-3">2</span>
					<span>《党的光辉历程》</span>
					<span class="ml-auto text-primary font-bold">93.5</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-red mr-3">3</span>
					<span>《革命精神永流传》</span>
					<span class="ml-auto text-primary font-bold">92.1</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-gray mr-3">4</span>
					<span>《红色家书》</span>
					<span class="ml-auto text-primary font-bold">90.7</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-gray mr-3">5</span>
					<span>《百年征程》</span>
					<span class="ml-auto text-primary font-bold">89.4</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-gray mr-3">6</span>
					<span>《新时代的奋斗者》</span>
					<span class="ml-auto text-primary font-bold">88.8</span>
				</li>
				<li class="flex items-center py-3">
					<span class="rank-number rank-number-gray mr-3">7</span>
					<span>《初心与使命》</span>
					<span class="ml-auto text-primary font-bold">88.1</span>
				</li>
			</ul>
		</div>

		<!-- 教师评分TOP10 -->
		<div class="bg-white rounded-lg card-shadow p-5">
			<div class="flex items-center mb-4">
				<i class="fas fa-chalkboard-teacher text-primary mr-2"></i>
				<h2 class="font-bold text-lg">教师评分TOP10</h2>
			</div>
			<ul>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-red mr-3">1</span>
					<span>《红色记忆》</span>
					<span class="ml-auto text-primary font-bold">97.2</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-red mr-3">2</span>
					<span>《党的光辉历程》</span>
					<span class="ml-auto text-primary font-bold">94.9</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-red mr-3">3</span>
					<span>《革命精神永流传》</span>
					<span class="ml-auto text-primary font-bold">93.5</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-gray mr-3">4</span>
					<span>《红色家书》</span>
					<span class="ml-auto text-primary font-bold">92.3</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-gray mr-3">5</span>
					<span>《百年征程》</span>
					<span class="ml-auto text-primary font-bold">91.2</span>
				</li>
				<li class="flex items-center py-3 border-b border-gray-100">
					<span class="rank-number rank-number-gray mr-3">6</span>
					<span>《新时代的奋斗者》</span>
					<span class="ml-auto text-primary font-bold">90.5</span>
				</li>
				<li class="flex items-center py-3">
					<span class="rank-number rank-number-gray mr-3">7</span>
					<span>《初心与使命》</span>
					<span class="ml-auto text-primary font-bold">89.8</span>
				</li>
			</ul>
		</div>
	</div>
</main>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
	var prefix = ctx + "comp/setting";
	$(function() {
		var options = {
			url: prefix + "/list",
			updateUrl: prefix + "/edit/{id}",
			modalName: "参赛设置",
			columns: [{
				checkbox: true
			}]
		};
		$.table.init(options);
	});

	function workSetting() {
		$.operate.edit(1);
	}




</script>
</body>
</html>